<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Copy Free - 预览效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .section {
            margin-bottom: 40px;
            background: white;
            padding: 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #4F46E5;
            text-align: center;
            margin-bottom: 30px;
        }
        h2 {
            color: #333;
            margin-bottom: 20px;
        }
        .preview-box {
            /* border: 1px solid #4F46E5; */
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        .preview-box::before {
            display: none;
        }
        /* 顶部宣传图块样式 */
        .hero-banner {
            width: 1400px;
            height: 560px;
            background: linear-gradient(135deg, #4F46E5, #818CF8);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 120px;
            box-sizing: border-box;
            color: white;
            margin: 0;
        }
        .hero-content {
            flex: 1;
            /* padding-left: 60px; */
        }
        .hero-title {
            font-size: 48px;
            margin-bottom: 20px;
        }
        .hero-features {
            font-size: 24px;
            line-height: 1.6;
        }
        .hero-image {
            width: 400px;
            height: 400px;
            background: white;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        /* 小型宣传图块样式 */
        .small-promo {
            width: 440px;
            height: 280px;
            background: linear-gradient(135deg, #4F46E5, #818CF8);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .small-promo-content {
            max-width: 80%;
        }
        /* 截图模板样式 */
        .screenshot {
            width: 1280px;
            height: 800px;
            background: white;
            position: relative;
            overflow: hidden;
        }
        .browser-bar {
            height: 40px;
            background: #f0f0f0;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }
        .browser-dots {
            display: flex;
            gap: 6px;
            margin-right: 20px;
        }
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .dot-red { background: #ff5f57; }
        .dot-yellow { background: #febc2e; }
        .dot-green { background: #28c840; }
        .browser-address {
            flex: 1;
            height: 28px;
            background: white;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            color: #666;
            font-size: 14px;
        }
        .content-area {
            padding: 20px;
            height: calc(100% - 40px);
            overflow: auto;
        }
        .text-block {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            position: relative;
        }
        .copy-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #4F46E5;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .extension-popup {
            position: absolute;
            top: 60px;
            right: 20px;
            width: 300px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 20px;
        }
        .popup-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .extension-icon {
            width: 48px;
            height: 48px;
            background: #4F46E5;
            border-radius: 8px;
            margin-right: 12px;
        }
        .popup-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        .popup-content {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Copy Free - 商店素材预览</h1>

        <!-- 顶部宣传图块 -->
        <section class="section">
            <h2>1. 顶部宣传图块</h2>
            <div class="preview-box" data-size="1400 x 560">
                <div class="hero-banner">
                    <div class="hero-content">
                        <div class="hero-title">Copy Free</div>
                        <div class="hero-features">
                            ✓ 一键解除复制限制<br>
                            ✓ 支持所有网页<br>
                            ✓ 简单易用<br>
                            ✓ 安全可靠
                        </div>
                    </div>
                    <div class="hero-image">
                        <svg width="200" height="200" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="64" cy="64" r="60" fill="#4F46E5"/>
                            <g transform="translate(28, 28)">
                                <rect x="20" y="8" width="52" height="64" rx="4" fill="#E0E7FF" opacity="0.6"/>
                                <rect x="8" y="20" width="52" height="64" rx="4" fill="#ffffff"/>
                                <rect x="18" y="34" width="32" height="2" rx="1" fill="#4F46E5"/>
                                <rect x="18" y="44" width="32" height="2" rx="1" fill="#4F46E5"/>
                                <rect x="18" y="54" width="24" height="2" rx="1" fill="#4F46E5"/>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
        </section>

        <!-- 小型宣传图块 -->
        <section class="section">
            <h2>2. 小型宣传图块</h2>
            <div class="preview-box" data-size="440 x 280">
                <div class="small-promo">
                    <div class="small-promo-content">
                        <svg width="80" height="80" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="64" cy="64" r="60" fill="white"/>
                            <g transform="translate(28, 28)">
                                <rect x="20" y="8" width="52" height="64" rx="4" fill="#4F46E5" opacity="0.6"/>
                                <rect x="8" y="20" width="52" height="64" rx="4" fill="#4F46E5"/>
                                <rect x="18" y="34" width="32" height="2" rx="1" fill="white"/>
                                <rect x="18" y="44" width="32" height="2" rx="1" fill="white"/>
                                <rect x="18" y="54" width="24" height="2" rx="1" fill="white"/>
                            </g>
                        </svg>
                        <h3 style="margin: 20px 0; font-size: 24px;">Copy Free</h3>
                        <p style="margin: 0; font-size: 16px;">解除网页复制限制，让复制更自由</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 截图模板 -->
        <section class="section">
            <h2>3. 截图模板</h2>
            <div class="preview-box" data-size="1280 x 800">
                <div class="screenshot">
                    <div class="browser-bar">
                        <div class="browser-dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                        <div class="browser-address">https://example.com/article</div>
                    </div>
                    <div class="content-area">
                        <div class="text-block">
                            <button class="copy-button">复制</button>
                            <h3>示例文章标题</h3>
                            <p>这是一段示例文本，演示Copy Free插件的功能。通常这样的文本在某些网站上是无法复制的，但使用我们的插件后，您可以自由地复制这些内容。</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="text-block">
                            <button class="copy-button">复制</button>
                            <h3>功能特点</h3>
                            <ul>
                                <li>自动解除复制限制</li>
                                <li>支持右键菜单</li>
                                <li>支持快捷键操作</li>
                                <li>适用于所有网页</li>
                            </ul>
                        </div>
                        <div class="extension-popup">
                            <div class="popup-header">
                                <div class="extension-icon"></div>
                                <div class="popup-title">Copy Free</div>
                            </div>
                            <div class="popup-content">
                                <p>✓ 已启用复制功能</p>
                                <p>现在您可以自由复制该页面的内容了</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
